<template>
  <div class="app-container">
    <div class="search-container scanningPage">
      <h4>二维码 / 条形码识别（demo）</h4>
      <el-divider />
      <el-form
        ref="formRef"
        label-position="left"
        label-width="90px"
        :model="form"
        style="width: 60vw; height: 40vh; min-height: 200px; min-width: 380px"
      >
        <el-form-item label="设备二维码" prop="code">
          <el-input
            v-model="form.code"
            style="width: 83%"
            placeholder="请录入二维码"
            clearable
          />
          <svg-icon
            icon-class="saoma"
            class="ml-[15px] cursor-pointer !w-[20px] !h-[20px]"
            @click="openScaner(1, 'code')"
          />
        </el-form-item>
        <el-form-item label="设备条形码" prop="code1">
          <el-input
            v-model="form.code1"
            style="width: 83%"
            placeholder="请录入条形码"
            clearable
          />
          <svg-icon
            icon-class="saoma"
            class="ml-[15px] cursor-pointer !w-[20px] !h-[20px]"
            @click="openScaner(2, 'code1')"
          />
        </el-form-item>
        <el-form-item class="mt-[40px]">
          <el-button type="primary" @click="submitForm()">录 入</el-button>
          <el-button @click="resetForm(formRef)">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 二维码扫码组件 -->
    <Scaner
      v-if="showScaner"
      @code-scanned="codeScanned"
      @error-captured="errorCaptured"
      @close-scaner="closeScaner"
      :stop-on-scanned="true"
      :draw-on-found="true"
      :responsive="false"
    />
    <!-- 条形码扫码组件 -->
    <BarCode
      v-if="showQuagga"
      @code-scanned="codeScanned"
      @error-captured="errorCaptured"
      @close-scaner="closeScaner"
    />
  </div>
</template>

<script setup lang="ts">
import type { FormInstance } from "element-plus";

defineOptions({
  name: "ScanningCode",
  inheritAttrs: false,
});

const showScaner = ref(false);
const showQuagga = ref(false);
const activeCode = ref("");
const form = reactive<any>({
  code: "",
  code1: "",
});

// 打开扫码
function openScaner(type: number, name: string) {
  showScaner.value = type === 1 ? true : false;
  showQuagga.value = type === 2 ? true : false;
  activeCode.value = name;
}

// 扫码结果
function codeScanned(code: any) {
  setTimeout(() => {
    form[activeCode.value] = code;
    closeScaner(false);
    ElMessage.success("扫码成功!");
  }, 200);
}

// 关闭扫码
function closeScaner(isShow: boolean) {
  showQuagga.value = isShow;
  showScaner.value = isShow;
  activeCode.value = "";
}

// 捕获异常
interface ErrorProps {
  name?: string;
  message?: string;
}
const errorMessage = ref("");
function errorCaptured(error: ErrorProps) {
  switch (error.name) {
    case "NotAllowedError":
      errorMessage.value = "无权限访问摄像头";
      break;
    case "NotFoundError":
      errorMessage.value = "没有连接的摄像头";
      break;
    case "NotSupportedError":
      errorMessage.value = "页面存在安全问题，请检查页面url";
      break;
    case "NotReadableError":
      errorMessage.value = "无法访问您的摄像头，请确保摄像头未被占用";
      break;
    case "OverconstrainedError":
      errorMessage.value = "与所有摄像机不匹配";
      break;
    default:
      errorMessage.value = "UNKNOWN ERROR: " + error.message;
  }
  alert(`${error.message}`);
}

const formRef = ref<FormInstance>();
function submitForm() {
  ElMessage.success("录入成功");
}
function resetForm(formEl: FormInstance | undefined) {
  if (!formEl) return;
  formEl.resetFields();
}
</script>

<style lang="scss" scoped>
.scanningPage {
  padding: 20px;
}
</style>
